<template>
    <div>
      <div class="menu_aside">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#D3DCE6"
          text-color="#000"
          active-text-color="#3E95FD"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span>学生信息录入及查询</span>
            </template>
            <el-menu-item index="/home/stuInfoEntry">学生信息录入</el-menu-item>
            <el-menu-item index="/home/stuInfoSelect">学生信息查询</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>成绩录入及查询</span>
            </template>
            <el-menu-item-group>
              <template slot="title">入学</template>
              <el-menu-item index="/index/entryGradeInput"
                >入学成绩录入</el-menu-item
              >
              <el-menu-item index="/index/entryGradeSelect"
                >入学成绩查询</el-menu-item
              >
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">期中</template>
              <el-menu-item index="/index/midGradeInput"
                >期中成绩录入</el-menu-item
              >
              <el-menu-item index="/index/midGradeSelect"
                >期中成绩查询</el-menu-item
              >
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">期末</template>
              <el-menu-item index="/index/endGradeInput"
                >期末成绩录入</el-menu-item
              >
              <el-menu-item index="/index/endGradeSelect"
                >期末成绩查询</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/index/gradeAnalysis">
            <i class="el-icon-menu"></i>
            <span slot="title">成绩分析</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
  </template>
  
  <script>
  import { Menu, MenuItem, Submenu, MenuItemGroup } from "element-ui";
  export default {
    components: {
      "el-menu": Menu,
      "el-menu-item": MenuItem,
      "el-submenu": Submenu,
      "el-menu-item-group": MenuItemGroup,
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  };
  </script>
  
  <style lang="scss">
  div {
    .menu_aside {
      font-size: 50px;
    }
  }
  </style>